<!DOCTYPE html>
<html lang="en">
<!-- 消防物资类型 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饮水净化系统</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/index.css">


</head>

<body>
    <div class="app">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title"></div>
            <div class="header-menu">

            </div>
            <div class="header-tool">
                <img src="../static/img/username.png" alt="" onclick="showPasswordWindow()">
                <img src="../static/img/logout.png" alt="" onclick="logout()">
            </div>
        </div>
        <div class="contain">
            <div class="con-left">
                <div class="left-map">
                    <div class="o-l-on-search">
                        <!-- 地图搜索栏 -->
                        <div class="search-box">
                            <div class="layui-form-item" style="margin-bottom: 0.05rem;display: flex;">
                                <div style="width: 100%;">
                                    <input type="text" required="" placeholder="地址查询" class="layui-input poi-input"
                                        id="tipinput">
                                </div>
                                <!-- <label id="search-address" class="layui-form-label">查询</label> -->
                            </div>
                            <!-- 地图工具栏 -->
                            <div class="tool-box">
                                <div class="tool-box-item" data-type="reset" title="还原地图"><img
                                        src="../static/img/tool1.png"><span>还原</span>
                                </div>
                                <div class="tool-box-item" data-type="enlarge" title="框选地图放大"><img
                                        src="../static/img/tool2.png"><span>放大</span>
                                </div>
                                <div class="tool-box-item" data-type="narrow" title="框选地图缩小"><img
                                        src="../static/img/tool3.png"><span>缩小</span>
                                </div>
                                <div class="tool-box-item" data-type="position" title="定位经纬度"><img
                                        src="../static/img/tool4.png"><span>坐标</span>
                                </div>
                                <div class="tool-box-item" data-type="distance" title="测量两点距离"><img
                                        src="../static/img/tool5.png"><span>测距</span>
                                </div>
                                <div class="tool-box-item" data-type="area" title="框选面积"><img
                                        src="../static/img/tool6.png"><span>面积</span>
                                </div>
                                <div class="tool-box-item" data-type="screenshot" title="屏幕截图"><img
                                        src="../static/img/op8.png"><span>截图</span>
                                </div>
                                <!-- <div class="tool-box-item" data-type="clear" title="清除绘制"><img
                                        src="../static/img/tool7.png"><span>清除</span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="map-overview">
                        <div class="map-overview-item active" data-type="">
                            <img src="../static/img/m0.png" alt="">
                            <div class="overview-item">
                                <div>监控总数</div>
                                <div id="item-count-0"></div>
                            </div>
                        </div>
                        <div class="map-overview-item" data-type="1">
                            <img src="../static/img/m1.png" alt="">
                            <div class="overview-item">
                                <div>水质监控</div>
                                <div id="item-count-1"></div>
                            </div>
                        </div>
                        <div class="map-overview-item" data-type="2">
                            <img src="../static/img/m2.png" alt="">
                            <div class="overview-item">
                                <div>视频监控</div>
                                <div id="item-count-2"></div>
                            </div>
                        </div>
                        <div class="map-overview-item" data-type="3">
                            <img src="../static/img/m3.png" alt="">
                            <div class="overview-item">
                                <div>警戒球机</div>
                                <div id="item-count-3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="input-card" style="width: auto;">
                        <button class="btn" id="map-btn">切换图层</button>
                    </div>
                    <div id="map"></div>
                </div>
                <div class="left-chart">
                    <div class="left-analysis normal-module">
                        <div class="con-title">
                            今年告警总次数分析
                        </div>
                        <div id="analysis-chart"></div>
                    </div>
                    <div class="left-trend normal-module">
                        <div class="con-title">
                            近三十天告警趋势
                        </div>
                        <div id="trend-chart">

                        </div>
                    </div>
                </div>
            </div>
            <div class="con-right">
                <div class="right-realtime normal-module">
                    <div class="con-title">
                        实时监测
                        <span class="data-more">更多</span>
                    </div>

                    <div class="realtime-list">
                        <div class="realtime-item">
                            <img src="../static/img/icon1.png" alt="">
                            <div>安装地址</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <img src="../static/img/icon2.png" alt="">
                            <div>设备编号</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <img src="../static/img/icon3.png" alt="">
                            <div>设备状态</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <img src="../static/img/icon4.png" alt="">
                            <div>监测浊度</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <img src="../static/img/icon5.png" alt="">
                            <div>监测温度</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <img src="../static/img/icon6.png" alt="">
                            <div>上报时间</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <img src="../static/img/icon7.png" alt="">
                            <div>信号强度</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-alarm normal-module">
                    <div class="con-title">
                        告警列表
                        <span class="alarm-more">更多</span>
                    </div>
                    <div class="alarm-list">
                    </div>
                </div>
                <div class="right-ratio normal-module">
                    <div class="con-title">
                        告警占比
                    </div>
                    <div id="ratio-chart">

                    </div>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '69dcd30c31b7daf6747df1e6c2a94b25',
        }
    </script>
    <script
        src="https://webapi.amap.com/maps?v=2.0&key=1edf55936f33c0eb34fb9745325a1be0&plugin=AMap.GeoJSON,AMap.DistrictSearch,AMap.Scale,AMap.Driving,AMap.MouseTool,AMap.PlaceSearch,AMap.Autocomplete,AMap.Geocoder"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/util/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="../static/js/util/html2canvas.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/index.js"></script>
    <script type="text/javascript" src="../static/js/util/ezuikit.js"></script>

</body>

</html>